﻿<%@ Page Title="" Language="C#" MasterPageFile="~/site.master" AutoEventWireup="true" CodeFile="Buy.aspx.cs" Inherits="Buy" Culture="auto" UICulture="auto" %>

<%@ Register src="UserControls/UCProductsHistory.ascx" tagname="UCProductsHistory" tagprefix="uc1" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
    <script type="text/javascript" src="<%=ResolveUrl("~/Scripts/jquery.ae.image.resize.min.js") %>"></script>
    <script type="text/javascript">
        $(function () {
            //品牌目录
            $(".categories_inner .column").each(function () {
                if ($(this).find("div").length == 0) {
                    $(this).remove();
                }
            });
            updateCategories();
            $(".categories_collapse").live("click", function () {
                var categories = $(".categories");
                var iconDown = '<%=ResolveUrl("~/images/categories_collapse_down.jpg") %>';
                var iconUp = '<%=ResolveUrl("~/images/categories_collapse_up.jpg") %>';

                if (categories.height() != 16) {
                    //                    categories.empty().animate({ height: 16 }).append('<a class="categories_collapse btn" style="bottom:0;"><img src="' + icon + '" /></a>');
                    categories.animate({ height: 16 }, function () {
                        $(this).find('.categories_collapse').find('img').attr({ src: iconDown });
                    });
                }
                else {
                    //                    if (Brands.UpdateBrands()) {
                    //                        __doPostBack('UpdatePanel1', '');
                    //                    }
                    categories.animate({ height: 140 }, function () {
                        $(this).find('.categories_collapse').find('img').attr({ src: iconUp });
                    });
                }
            });


            //历史
            $(".pic").find("img").aeImageResize({ height: 156, width: 156 });
            $("#<%=imgImageBig.ClientID %>").aeImageResize({ height: 250, width: 250 });


            //显示&隐藏商品状态
            $(".product .pic").mouseenter(function () {
                $(this).find(".status").hide();
            }).mouseleave(function () {
                $(this).find(".status").fadeIn();
            });


            //提交订单
            $("#btnsubmit").click(function () {
                if (formvalidate()) {
                    $(".error_wrapper").hide();
                    var orderArray = [];
                    var checkedsizes = [];
                    var checkedcolors = [];
                    $(".chk_sizes a.checkbox").each(function () {
                        if ($(this).hasClass("checked")) {
                            checkedsizes.push({ size: $(this).attr("rel") });
                        }
                    });
                    $(".chk_color a.checkbox").each(function () {
                        if ($(this).hasClass("checked")) {
                            checkedcolors.push({ Color: $(this).attr("rel") });
                        }
                    });
                    orderArray.push({
                        "ProductID": '<%=this.GetQueryString("productID", false) %>',
                        "Count": $.utility.encode($("#txtNum").val()),
                        "Phone": $.utility.encode($("#txtPhone").val()),
                        "QQ": $.utility.encode($("#txtQQ").val()),
                        "Email": $.utility.encode($("#txtEmail").val()),
                        "Address": $.utility.encode($("#txtAddress").val()),
                        "Memo": $.utility.encode($("#txtMemo").val()),
                        "Sizes": checkedsizes,
                        "Colors": checkedcolors,
                        "Price": $.utility.encode($("#<%=lblPriceSubmit.ClientID %>").text())
                    });
                    var orderdata = JSON.stringify(orderArray[0]);
                    var request = $.ajax({
                        url: '<%=ResolveUrl("~/handlers/OrderHandler.ashx") %>',
                        type: "POST",
                        data: { order: orderdata },
                        dataType: "json"
                    });
                    request.done(function (msg) {
                        if (msg.Status.toLowerCase() != "false") {
                            alert('<%=Resources.ResourceGlobal.Note_ErrMsg_OrderSuccess %>' + msg.Status);
                            window.location.reload();
                        }
                        else {
                            alert('<%=Resources.ResourceGlobal.Note_ErrMsg_OrderFailed%>');
                        }
                    });
                    request.fail(function (jqXHR, textStatus) {
                        alert('<%=Resources.ResourceGlobal.Note_ErrMsg_OrderFailed%>');
                    });
                }
            });

            function formvalidate() {
                var result = true;
                $(".error_wrapper ul").empty();
                $(".required").each(function () {
                    if ($.trim($(this).val()) == "") {
                        $(".error_wrapper ul").append("<li>" + $(this).attr("title") + "</li>");
                        result = false;
                    }
                });
                if ($(".chk_sizes a.checked").length <= 0) {
                    $(".error_wrapper ul").append('<li><asp:Localize ID="LocalizeSize" Text="<%$ Resources: ResourceGlobal, Note_Required_Size  %>" runat="server"></asp:Localize></li>');
                    result = false;
                }
                if ($(".chk_color a.checked").length <= 0) {
                    $(".error_wrapper ul").append('<li><asp:Localize ID="LocalizeColor" Text="<%$ Resources: ResourceGlobal, Note_Required_Color  %>" runat="server"></asp:Localize></li>');
                    result = false;
                }

                if (!result) $(".error_wrapper").fadeIn();
                else $(".error_wrapper ul").empty();

                return result;
            }

            $(".chk_sizes a.checkbox,.chk_color a.checkbox").click(function () {
                $(this).toggleClass("checked");
            });
        });

        //Updatepanel1 更新时重新调用carouFredSel jQuery插件
        function updateCategories() {
            $(".categories_inner").carouFredSel({
                width: 970,
                items: { visible: 5,
                    width: 190,
                    height: 140
                },
                auto: { pauseOnHover: "resume", duration: 700 },
                prev: { button: $(".categories_prev") },
                next: { button: $(".categories_next") }
            });
        }

        //圆角
        addEvent(window, 'load', initCorners);

        function initCorners() {
            var tag_settings = {
                tl: { radius: 10 },
                tr: { radius: 10 },
                bl: { radius: 10 },
                br: { radius: 10 },
                antiAlias: true
            };

            curvyCorners(tag_settings, ".input_wrapper");
        }
    </script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
    <asp:ScriptManager ID="ScriptManager1" runat="server" EnableScriptGlobalization="true" EnableScriptLocalization="true" AsyncPostBackTimeout="36000">
    </asp:ScriptManager>
    <!--品牌分类-->
    <div class="categories block">
        <asp:UpdatePanel ID="UpdatePanel1" runat="server">
            <ContentTemplate>
                <ul class="categories_inner">
                    <li class="column">
                        <script type="text/javascript">
                            //Sys.Application.add_load(updateCategories);
                        </script>
                        <asp:Repeater ID="rptCategories" runat="server" OnItemCommand="rptCategories_ItemCommand">
                            <ItemTemplate>
                                <div>
                                    <asp:LinkButton ID="lbtnCategory" runat="server" CommandName="CATEGORY_CHANGE" CommandArgument='<%#Eval("BrandID").ToString()%>'><%#HttpUtility.HtmlEncode(Eval("BrandName").ToString())%></asp:LinkButton></div>
                                <%# ((Container.ItemIndex+1) % 3 == 0 )? "</li><li class='column'>" :""%>
                            </ItemTemplate>
                        </asp:Repeater>
                    </li>
                </ul>
            </ContentTemplate>
        </asp:UpdatePanel>
        <a class="categories_prev btn"></a><a class="categories_next btn"></a><a class="categories_collapse btn">
            <img src='<%=ResolveUrl("~/images/categories_collapse_up.jpg") %>' />
        </a>
    </div>
    <!--商品信息-->
    <div class="block padding40 margin5_tb clearfix b_202020">
        <div class="buy_left">
            <div><asp:Image ID="imgImageBig" runat="server" /></div>
        </div>
        <div class="buy_right">
            <div class="detail_info" style="font-size:14px;">
                <p><asp:Literal ID="literProductName" runat="server"></asp:Literal></p>
            </div>
            <div class="detail_info c_ffb400" style="height:60px;">
                <p style="line-height:20px;">
                    <span class="float_l"><asp:Localize ID="Localize1" Text='<%$ Resources: ResourceGlobal, Product_Price  %>' runat="server"></asp:Localize>：</span>
                    <asp:Label ID="lblPrice" runat="server" CssClass="price float_l"></asp:Label>
                    <asp:Label ID="lblSalePrice" runat="server" CssClass="saleprice float_l" ForeColor="Red"></asp:Label>
                    <span class="float_r" style="font-size:20px;color:Red;"><asp:Literal ID="literStatus" runat="server"></asp:Literal></span>
                    <asp:Label ID="lblPriceSubmit" runat="server" style="display:none;"></asp:Label>
                </p>
            </div>
            <div class="detail_info">
                <table>
                    <tr>
                        <td style="width:20%;"><asp:Localize ID="Localize2" Text='<%$ Resources: ResourceGlobal, Product_Size  %>' runat="server"></asp:Localize>:</td>
                        <td style="width:80%;">
                            <div class="chk_sizes float_l">
                                <asp:Repeater ID="rptSizes" runat="server">
                                    <ItemTemplate>
                                        <a class="size checkbox" rel='<%#Container.DataItem %>'><%#Container.DataItem %></a>
                                    </ItemTemplate>
                                </asp:Repeater>
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td><asp:Localize ID="Localize3" Text='<%$ Resources: ResourceGlobal, Product_Color  %>' runat="server"></asp:Localize>:</td>
                        <td>
                            <div class="chk_color float_l">
                                <asp:Repeater ID="rptColor" runat="server">
                                    <ItemTemplate>
                                        <a class="color checkbox" rel='<%#Container.DataItem %>'><%#Container.DataItem %></a>
                                    </ItemTemplate>
                                </asp:Repeater>
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td><asp:Localize ID="Localize4" Text='<%$ Resources: ResourceGlobal, Product_Num  %>' runat="server"></asp:Localize>:</td>
                        <td>
                            <div class="input_wrapper">
                                <input id="txtNum" type="text" style="width:50px;" class="required" title='<asp:Localize ID="LocalizeNum" Text="<%$ Resources: ResourceGlobal, Product_Num  %>" runat="server"></asp:Localize>' />
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td><asp:Localize ID="Localize5" Text='<%$ Resources: ResourceGlobal, Product_Phone  %>' runat="server"></asp:Localize>:</td>
                        <td>
                            <div class="input_wrapper">
                                <input id="txtPhone" type="text" style="width:370px;" class="required" title='<asp:Localize ID="LocalizePhone" Text="<%$ Resources: ResourceGlobal, Product_Phone  %>" runat="server"></asp:Localize>' />
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td>QQ/MSN:</td>
                        <td>
                            <div class="input_wrapper">
                                <input id="txtQQ" type="text" style="width:370px;" />
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td>Email:</td>
                        <td>
                            <div class="input_wrapper">
                                <input id="txtEmail" type="text" style="width:370px;" />
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td><asp:Localize ID="Localize6" Text='<%$ Resources: ResourceGlobal, Product_Address  %>' runat="server"></asp:Localize>:</td>
                        <td>
                            <div class="input_wrapper">
                                <input id="txtAddress" type="text" style="width:370px;" class="required" title='<asp:Localize ID="LocalizeAddress" Text="<%$ Resources: ResourceGlobal, Product_Address  %>" runat="server"></asp:Localize>' />
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td><asp:Localize ID="Localize7" Text='<%$ Resources: ResourceGlobal, Product_Memo  %>' runat="server"></asp:Localize>:</td>
                        <td>
                            <textarea id="txtMemo" cols="53" rows="6"></textarea>
                        </td>
                    </tr>
                </table>
            </div>
            <div class="error_wrapper"><p><b><asp:Localize ID="Localize9" Text='<%$ Resources: ResourceGlobal, Note_Required  %>' runat="server"></asp:Localize>：</b></p><ul></ul></div>
            <div class="margin5_tb">
                <a id="btnsubmit" class="buttons"><b></b><span><asp:Localize ID="Localize8" Text='<%$ Resources: ResourceGlobal, Button_Remittance  %>' runat="server"></asp:Localize></span><em></em></a>
            </div>
        </div>
    </div>
    <uc1:UCProductsHistory ID="UCProductsHistory1" runat="server" />
</asp:Content>

